import React, { Component } from 'react'
import { connect } from 'react-redux';

import {
  WriterHeader,
  WriterList,
  WriterItem
} from '../style'

class Writer extends Component {
  render() {
    return (
      <div>
        <WriterHeader>
          <div className="title">
            <span>推荐作者</span>
            <div className="change">
              <i className="iconfont">&#xe851;</i>
              换一批
            </div>
          </div>
        </WriterHeader>
        <WriterList>
          {
            this.props.list.map(item => (
              <WriterItem key={item.get('id')}>
                <img className="authorPic" alt="" src={item.get('pic')} />
                <div className="follow">
                  <i className="iconfont">&#xe6c3;</i>
                  关注
                </div>
                <div className="author">{item.get('author')}</div>
                <p className="desc">{item.get('desc')}</p>
              </WriterItem>
            ))
          }
        </WriterList>
      </div>
    )
  }
}

const mapState = (state) => ({
  list: state.getIn(['home', 'writerList'])
})

export default connect(mapState, null)(Writer)
